
import React, { useCallback, useEffect, useState } from 'react'
import { Input } from 'antd';

import "./MySearch.scss";
import VideoCard from "../components/VideoCard";
import LiveItem from '../components/Live/LiveItem';
import { useNavigate } from 'react-router';
import { httpSearchLive, httpSearchVideo } from '../apis';
const { Search } = Input;

export default function MySearch() {
  const [videolist,setVideoList] = useState([]);
  const [liveList,setLiveList] = useState([]);
  const navigate = useNavigate();

  const handleClick = useCallback((videoId)=>{
    let video;
    videolist.some((v)=>{
      if(v.videoId===videoId) {
        video = v; 
        return true;
      }
      return false;
    })
    navigate(`/video/${videoId}`,{
      state: {
        video
      }
    });
  },[videolist]);



  const onSearch = useCallback(async (values)=>{
    console.log("Search:",values);
    let data = {};
    data.name = values;
    
    let resLive = await httpSearchLive(data);
    setLiveList(resLive);

    let resVideo = await httpSearchVideo(data);
    setVideoList(resVideo);
  },[]);
  return (
    <div className='Search-container'>
      <div className='Search'>
        <Search
          placeholder="请输入搜索内容"
          allowClear
          enterButton="Search"
          size="large"
          onSearch={onSearch}
        />
      </div>
      <h3>视频搜索结果: </h3>
      <div className='container'>
        {
          videolist.map((v)=>(
            <VideoCard {...v} key={v.videoId} handleClick={handleClick}></VideoCard>
          ))
        }
      </div>

      <h3>直播搜索结果: </h3>
      <div className='container'>
        {
          liveList.map((v)=>(
            <LiveItem {...v} key={v.liveId}></LiveItem>
          ))
        }
      </div>
    </div>
  )
}
